<template>
  <div class="people-container">
    <div class="search-box">人员搜索：
      <el-input v-model="input1" placeholder="请输入" class="searchIpt" />
      <el-button icon="el-icon-search" @click="choosePeople">搜索</el-button>
    </div>

    <div class="table-container">
      <el-button icon="el-icon-circle-plus" @click="addOrEditBtn('add')">新建</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="userName" label="人员名称" />
        <el-table-column prop="regionName" label="归属区域" />
        <el-table-column prop="roleCode" label="角色">
          <template slot-scope="scope">
            <span v-if="scope.row.roleCode == 1001">管理员</span>
            <span v-if="scope.row.roleCode == 1002">运营员</span>
            <span v-if="scope.row.roleCode == 1003">维修员</span>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button size="mini" @click="addOrEditBtn('edit',row.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页 -->
      <div class="pagination">
        <span class="total">共{{ totalCount }}条记录</span>
        <span class="currentPage">第{{ pageIndex }}/{{ totalPage }}页</span>
        <el-button class="changeBtn" @click="prePage">上一页</el-button>
        <el-button class="changeBtn" @click="nextPage">下一页</el-button>
      </div>
    </div>

    <!-- 对话框 -->
    <addAndEdit ref="addAndEditRef" :title="title" @success="getTableList" />
  </div>
</template>
<script>
import addAndEdit from './components/addAndEdit.vue'
import { getPeopleListRequest, delPeopleListRequest, choosePeopleRequest } from '../../api/people.js'
export default {
  name: 'PeopleList',
  components: { addAndEdit },
  data() {
    return {
      // table数据
      tableData: [],
      title: '',
      input1: '',
      pageIndex: '1',
      pageSize: '10',
      totalCount: '',
      totalPage: ''
    }
  },
  computed: {
  },
  created() {
    this.getTableList()
  },
  methods: {
    // 点击搜索
    async choosePeople() {
      // console.log(this.input1)
      const res = await choosePeopleRequest({ userName: this.input1 })
      this.totalPage = res.data.totalPage
      this.totalCount = res.data.totalCount
      this.tableData = res.data.currentPageRecords

      // this.getTableList()
    },
    // 上一页
    prePage() {
      if (this.pageIndex <= 1) {
        return
      }
      this.pageIndex--
      this.getTableList()
    },
    // 下一页
    nextPage() {
      if (this.pageIndex >= this.totalPage) {
        return
      }
      this.pageIndex++
      this.getTableList()
    },
    // 删除人员
    async handleDelete(id) {
      console.log(id)
      const res = await delPeopleListRequest(id)
      console.log(res, 'del')
      this.getTableList()
    },
    // 获取列表
    async getTableList() {
      const res = await getPeopleListRequest({ pageIndex: this.pageIndex,
        pageSize: this.pageSize })
      console.log(res, 8989)
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
    },

    // 添加和编辑
    async addOrEditBtn(type, id) {
      if (type === 'add') {
        this.title = '新增人员'
        this.$nextTick(() => {
          this.$refs.addAndEditRef.openDialog()
        })
        return
      }

      if (type === 'edit') {
        // 数据回显
        this.title = '编辑人员'
        this.$refs.addAndEditRef.getPeopleDetail(id)
        this.$nextTick(() => {
          this.$refs.addAndEditRef.openDialog()
        })
      }
    }
  }
}
</script>
<style lang='scss'  scoped>
.people-container {
  // height: 100vh;
  // background-color: pink;
}

.search-box {
  background-color: #fff;
  padding: 18px;
  font-size: 14px;
  color: rgb(93, 89, 89);

  .el-button {
    background-color: #6783f7;
    border: 0;
    color: #fff;
    height: 36px;
  }
}

::v-deep .searchIpt {
  width: 300px;
  height: 36px;
  margin-right: 18px;

  .el-input__inner {
    height: 36px;
  }
}

.table-container {
  padding: 20px;
  background-color: forestgreen;

  .el-button {
    background-color: #ef8648;
    border: 0;
    color: #fff;
    margin-bottom: 20px;
  }

}

::v-deep .el-form-item__label {
  font-weight: normal;
}

::v-deep .el-form-item__content {
  width: 70%;
}
</style>
